<template>
  <div class="coach-search">
    <!-- 搜索过滤器 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="教练姓名">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入教练姓名"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="searchForm.gender" placeholder="请选择性别" clearable>
            <el-option label="男" value="male" />
            <el-option label="女" value="female" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄范围">
          <el-select v-model="searchForm.ageRange" placeholder="请选择年龄范围" clearable>
            <el-option label="20-30岁" value="20-30" />
            <el-option label="30-40岁" value="30-40" />
            <el-option label="40-50岁" value="40-50" />
          </el-select>
        </el-form-item>
        <el-form-item label="教练等级">
          <el-select v-model="searchForm.level" placeholder="请选择等级" clearable>
            <el-option label="高级教练" value="senior" />
            <el-option label="中级教练" value="middle" />
            <el-option label="初级教练" value="junior" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 教练列表 -->
    <div class="coach-grid">
      <el-card 
        v-for="coach in coachList" 
        :key="coach.id"
        class="coach-card"
        shadow="hover"
      >
        <div class="coach-header">
          <el-avatar :size="60" :src="coach.avatar">
            {{ coach.name.charAt(0) }}
          </el-avatar>
          <div class="coach-info">
            <h3 class="coach-name">{{ coach.name }}</h3>
            <el-tag :type="getLevelTagType(coach.level)" size="small">
              {{ getLevelName(coach.level) }}
            </el-tag>
          </div>
          <div class="coach-rate">
            <span class="rate-amount">¥{{ coach.rate }}</span>
            <span class="rate-unit">/小时</span>
          </div>
        </div>

        <div class="coach-details">
          <p><strong>性别：</strong>{{ coach.gender === 'male' ? '男' : '女' }}</p>
          <p><strong>年龄：</strong>{{ coach.age }}岁</p>
          <p><strong>学员数：</strong>{{ coach.students }}/{{ coach.maxStudents }}</p>
          <p><strong>评分：</strong>
            <el-rate 
              v-model="coach.rating" 
              disabled 
              show-score 
              text-color="#ff9900"
              score-template="{value}"
            />
          </p>
        </div>

        <div class="coach-achievements">
          <h4>比赛成绩</h4>
          <p>{{ coach.achievements }}</p>
        </div>

        <div class="coach-actions">
          <el-button 
            type="primary" 
            :disabled="coach.students >= coach.maxStudents || isAlreadyPaired(coach.id)"
            @click="selectCoach(coach)"
          >
            <el-icon><UserFilled /></el-icon>
            {{ isAlreadyPaired(coach.id) ? '已选择' : '选择教练' }}
          </el-button>
          <el-button @click="viewCoachDetail(coach)">
            <el-icon><View /></el-icon>
            查看详情
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[12, 24, 36]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 教练详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="selectedCoach?.name + ' - 教练详情'"
      width="600px"
    >
      <div v-if="selectedCoach" class="coach-detail-content">
        <div class="detail-header">
          <el-avatar :size="80" :src="selectedCoach.avatar">
            {{ selectedCoach.name.charAt(0) }}
          </el-avatar>
          <div class="detail-info">
            <h3>{{ selectedCoach.name }}</h3>
            <el-tag :type="getLevelTagType(selectedCoach.level)">
              {{ getLevelName(selectedCoach.level) }}
            </el-tag>
            <p class="rate-info">收费标准：¥{{ selectedCoach.rate }}/小时</p>
          </div>
        </div>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="性别">
            {{ selectedCoach.gender === 'male' ? '男' : '女' }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{ selectedCoach.age }}岁
          </el-descriptions-item>
          <el-descriptions-item label="学员数">
            {{ selectedCoach.students }}/{{ selectedCoach.maxStudents }}
          </el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate 
              v-model="selectedCoach.rating" 
              disabled 
              show-score 
              text-color="#ff9900"
            />
          </el-descriptions-item>
          <el-descriptions-item label="比赛成绩" :span="2">
            {{ selectedCoach.achievements }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button 
          type="primary" 
          :disabled="selectedCoach?.students >= selectedCoach?.maxStudents || isAlreadyPaired(selectedCoach?.id)"
          @click="selectCoach(selectedCoach)"
        >
          选择教练
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, UserFilled, View } from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  name: '',
  gender: '',
  ageRange: '',
  level: ''
})

// 分页信息
const pagination = reactive({
  current: 1,
  size: 12,
  total: 0
})

// 教练列表
const coachList = ref([
  {
    id: '1',
    name: '李教练',
    gender: 'male',
    age: 28,
    level: 'middle',
    rate: 150,
    avatar: '',
    students: 15,
    maxStudents: 20,
    rating: 4.5,
    achievements: '2022年市级比赛第二名，2023年省级比赛第五名，有5年教学经验'
  },
  {
    id: '2',
    name: '王教练',
    gender: 'female',
    age: 25,
    level: 'senior',
    rate: 200,
    avatar: '',
    students: 18,
    maxStudents: 20,
    rating: 4.8,
    achievements: '国家二级运动员，曾获全国青少年比赛冠军，专业教学8年'
  },
  {
    id: '3',
    name: '张教练',
    gender: 'male',
    age: 35,
    level: 'senior',
    rate: 200,
    avatar: '',
    students: 12,
    maxStudents: 20,
    rating: 4.6,
    achievements: '前国家队队员，多次获得国际比赛奖项，教学经验丰富'
  },
  {
    id: '4',
    name: '赵教练',
    gender: 'female',
    age: 30,
    level: 'junior',
    rate: 80,
    avatar: '',
    students: 8,
    maxStudents: 20,
    rating: 4.2,
    achievements: '体育学院毕业，专业基础扎实，善于指导初学者'
  }
])

// 已选择的教练列表（模拟数据）
const selectedCoaches = ref(['1']) // 假设已经选择了id为1的教练

// 对话框状态
const detailDialogVisible = ref(false)
const selectedCoach = ref<any>(null)

// 获取等级名称
const getLevelName = (level: string) => {
  const levelMap: Record<string, string> = {
    'senior': '高级教练',
    'middle': '中级教练',
    'junior': '初级教练'
  }
  return levelMap[level] || '中级教练'
}

// 获取等级标签类型
const getLevelTagType = (level: string) => {
  const typeMap: Record<string, string> = {
    'senior': 'danger',
    'middle': 'warning',
    'junior': 'success'
  }
  return typeMap[level] || 'info'
}

// 检查是否已经选择过该教练
const isAlreadyPaired = (coachId?: string) => {
  return coachId ? selectedCoaches.value.includes(coachId) : false
}

// 搜索教练
const handleSearch = () => {
  // 这里应该调用API进行搜索
  console.log('搜索条件:', searchForm)
  ElMessage.success('搜索完成')
}

// 重置搜索条件
const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    gender: '',
    ageRange: '',
    level: ''
  })
  handleSearch()
}

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.size = size
  handleSearch()
}

// 当前页改变
const handleCurrentChange = (current: number) => {
  pagination.current = current
  handleSearch()
}

// 选择教练
const selectCoach = async (coach: any) => {
  if (!coach) return
  
  if (selectedCoaches.value.length >= 2) {
    ElMessage.warning('最多只能选择2名教练')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要选择 ${coach.name} 作为您的教练吗？`,
      '确认选择',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )

    // 这里应该调用API发送双选申请
    selectedCoaches.value.push(coach.id)
    ElMessage.success('双选申请已发送，等待教练确认')
    detailDialogVisible.value = false
  } catch {
    // 用户取消
  }
}

// 查看教练详情
const viewCoachDetail = (coach: any) => {
  selectedCoach.value = coach
  detailDialogVisible.value = true
}

onMounted(() => {
  pagination.total = coachList.value.length
})
</script>

<style scoped lang="scss">
.coach-search {
  .search-card {
    margin-bottom: 20px;

    .search-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  .coach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 20px;

    .coach-card {
      .coach-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;

        .coach-info {
          flex: 1;

          .coach-name {
            margin: 0 0 8px 0;
            font-size: 18px;
          }
        }

        .coach-rate {
          text-align: right;

          .rate-amount {
            font-size: 20px;
            font-weight: bold;
            color: #ff7700;
          }

          .rate-unit {
            font-size: 12px;
            color: #999;
          }
        }
      }

      .coach-details {
        margin-bottom: 16px;

        p {
          margin: 8px 0;
          font-size: 14px;
          color: #666;

          strong {
            color: #333;
          }
        }
      }

      .coach-achievements {
        background: #f9fafb;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 16px;

        h4 {
          margin: 0 0 8px 0;
          font-size: 14px;
          color: #333;
        }

        p {
          margin: 0;
          font-size: 13px;
          color: #666;
          line-height: 1.4;
        }
      }

      .coach-actions {
        display: flex;
        gap: 8px;

        .el-button {
          flex: 1;
        }
      }
    }
  }

  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}

.coach-detail-content {
  .detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;

    .detail-info {
      flex: 1;

      h3 {
        margin: 0 0 8px 0;
      }

      .rate-info {
        margin: 8px 0 0 0;
        color: #ff7700;
        font-weight: 500;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .coach-grid {
    grid-template-columns: 1fr;
  }

  .search-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 16px;
    }
  }
}
</style>
